<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>X搜索</title>
	<meta name="keywords" content="X搜索"/>
	<meta name="description" content="X搜索"/>
	<link rel="stylesheet" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
	<style type="text/css">
	.index_back{
		background-color: #043365;
		width: 100%;
		/*min-height: 100vh;*/

	}
	.header{
		height: 80px;
		line-height: 80px;
		color: #fff;
		margin: 10px 65px;
		display: flex;
		justify-content:space-between;
	}
	.header .logo{
		display: flex;
	}
	.header .logo h1{
		font-size: 30px;
		font-weight: 300;
		padding: 0;
    	margin: 0;
	}
	.header a{
		color: #fff;
		font-size: 14px;
	}
	.main{
		height: 280px;
	}
	.main .title{
		color: #fff;
		font-size: 32px;
		text-align: center;
		margin: 80px 0;
	}
	.main .search{
		width: 1050px;
		margin: 0 auto;
		display: flex;
	}
	
	.main .search_input{
		width: 870px;
		height: 48px;
		border: none;
	    outline: none;
	    padding: 12px 30px;
	    font-size: 24px;
	    color: #656565;
	}
	.main .search button{
		width: 180px;
		height: 72px;
		background-color: #286ff2;
		font-size: 24px;
		color: #fff;
		border: none;    
		/*outline: none;*/
	} 
	input::-webkit-input-placeholder{
        color:#acbce1;
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
        color:#acbce1;
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
        color:#acbce1;
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
        color:#acbce1;
    }
    



    .breathe-div {
	    width: 33px;
	    height: 33px;
	    border: 1px solid #2b92d4;
	    border-radius: 50%;
	    /*text-align: center;
	    cursor: pointer;*/
	    margin:22px 10px;
	    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	    overflow: hidden;
	    -webkit-animation-timing-function: ease-in-out;
	    -webkit-animation-name: breathe;
	    -webkit-animation-duration: 1500ms;
	    -webkit-animation-iteration-count: infinite;
	    -webkit-animation-direction: alternate;
	}

	@-webkit-keyframes breathe {
	    0% {
	        opacity: .4;
	        box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
	    }

	    100% {
	        opacity: 1;
	        border: 1px solid rgba(59, 235, 235, 0.7);
	        box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
	    }
	}



		.border-box{
            position: relative;
            margin:0 auto;
            width:600px;
            border: 2px solid #00a1ff;
            border-radius: 8px;
            padding: 20px 40px;
        }
        .border-box::before {
            position: absolute;
            top: -2px;
            bottom: -2px;
            left: 30px;
            width: calc(100% - 60px);
            content: "";
            border-top: 2px solid #016886;
            border-bottom: 2px solid #016886;
            z-index: 0;
        }
        .border-box::after {
            position: absolute;
            top: 30px;
            right: -2px;
            left: -2px;
            height: calc(100% - 60px);
            content: "";
            border-right: 2px solid #016886;
            border-left: 2px solid #016886;
            z-index: 0;
        }
        .border-box p{
            color:#00a1ff;
        }

	</style>

</head>
<body class="index_back">
	<div class="header">
		<div class="logo">
			<div class="breathe-div"></div> <h1>七秒搜索</h1>
		</div>
		<div class="right">
			<a href="#">登陆</a> |
			<a href="#">注册账号</a>
		</div>
	</div>
	<div class="main">
		<div class="title">七秒读书搜索系统</div>
		<div class="search">
			<input class="search_input" type="text" name="kw" placeholder="请输入..." />
			<button>全网搜索</button>
		</div>
	</div>

	<div class="border-box">
	    <p>共计收录：168825874条数据</p>
	    <p>今日收录：15874条数据</p>
	    <p>共计检索：1688258次</p>
	    <p>今日检索：5478次</p>
	</div>

	<footer>        
    </footer>
</body>
</html>